<template>
    <div class="wrap">
        <div class="list">
            <ul>
                <li v-for="item in list">
                    {{item.username}} -{{item.city}} -{{item.address}}
                    <button @click="edit(item)">编辑</button>
                    <button @click="del(item.id)">删除</button>
                </li>
            </ul>
            <div>
                <span v-for="item in num" @click="change(item)">{{item}}</span>
            </div>
        </div>
        <div class="btn">
            <button @click="$router.push('/add')">新增</button>
        </div>
    </div>
</template>

<script>
import request from '../util/request'
export default {
    data(){
        return {
            list:[],
            pagenum:1, //第几页
            limit:3,   //每页显示的条数
            num:0
        }
    },
    created(){
       this.getList();
    //    request.get('/test').then(res => {
    //        console.log(res);
    //    })
    },
    methods:{
        getList(){
            request.get('/api/list',{pagenum:this.pagenum,limit:this.limit}).then(res => {
                if(res.code === 1){
                    this.list = res.data;
                    this.num = Math.ceil(res.total/this.limit);
                }else{
                    console.log("获取失败")
                }
            })
        },
        edit(item){
            localStorage.setItem('info',JSON.stringify(item));
            this.$router.push('/add');
        },
        del(id){
            request.delete('/api/del',{id}).then(res => {
                if(res.code === 1){
                    console.log("删除成功")
                    this.getList();
                }else{
                    console.log("删除失败")
                }
            })
        },
        change(item){
            this.pagenum = item;
            this.getList();
        }
    }   
}
</script>

<style lang="scss">
    *{
        margin:0;
        padding:0;
        list-style: none;
    }
    html,body,#app,.wrap{
        width:100%;
        height: 100%;
        overflow: hidden;
    }
    .wrap{
        display: flex;
        flex-direction: column;
    }
    .list{
        width:100%;
        flex:1;
    }

    .btn{
        width:100%;
        height: 44px;

    }
</style>
